@include b(code) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  @include e(box) {
    width: 100%;
    height: 100%;
    min-height: 200px;
    overflow: hidden;
  }
}

@include b('code-toolbar') {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 100%;
  min-height: 32px;
  padding-right: getCssVar(spacing, base);
  font-size: getCssVar(font-size, header-6);

  &>*+* {
    margin-left:  getCssVar(spacing, base-loose);
  }

  i {
    cursor: pointer;

    &:hover {
      color: #{getCssVar(color, primary)};
    }
  }
}

@include b('code-footer') {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 100%;
  min-height: 36px;
  margin-top: getCssVar(spacing, base-tight);
  margin-right: getCssVar(spacing, tight);

  &>*+* {
    margin-left: getCssVar(spacing, base);;
  }


  @include e('cancel') {
    height: 36px;
    line-height: 36px;
    color: #{getCssVar(color, text, 1)};
    cursor: pointer;
    opacity: 0.7;

    &:hover {
      color: #{getCssVar(color, primary)};
      opacity: 1;
    }
  }

  @include e('save') {
    width: 96px;
    height: 36px;
    line-height: 36px;
    color: #{getCssVar(color, primary, active, text)};
    text-align: center;
    cursor: pointer;
    background-color: #{getCssVar(color, primary)};
    border-radius: 5px;

    &:hover {
      box-shadow: 0 2px 5px 1px #{getCssVar(color, primary)};
    }
  }
}

@include b('code-message') {
  width: 500px;
  max-width: unset;

  @include e('message-content') {
    @include m('message-tip') {
      color: #{getCssVar(color, text, 3)};
    }
  }

  @include e('message-cancel') {
    color: #{getCssVar(color, text, 1)};
    background-color: transparent;

    &:hover {
      color: #{getCssVar(color, primary)};
      background-color: transparent;
    }
  }

  @include e('message-comfire') {
    background-color: #{getCssVar(color, danger)} !important;

    &:hover {
      box-shadow: 0 2px 5px 1px #{getCssVar(color, danger)};
    }
  }
}

@include b('code-editor-enable') {
  .#{bem(code__box)} {
    // 减去工具栏高度与底部操作按钮高度
    height: calc(100% - (32px + 36px));
  }
}

@include b('code-dialog-full-screen') {
  height: 80% !important;

  @include b('code') {
    gap: 0;
    padding: 0 getCssVar(spacing, extra-loose);

    --w-e-toolbar-bg-color: #{getCssVar(color, bg, 0)};

    .#{bem(code__box)} {
      // 减去工具栏高度与底部操作按钮高度
      height: calc(100% - (56px + 68px));
    }

    .#{bem(code-toolbar)} {
      min-height: 56px;
    }
  }
}

@include b('code-footer-dialog') {
  min-height: 68px;
  margin-top: 0;
}
